<!-- eslint-disable max-len -->
<template>
  <div class="confirm-dialog">
    <!-- 头部图标区域 -->
    <div class="dialog-content">
      <div class="summary-card">
        <div class="summary-row">
          <span class="label">申请人：</span>
          <span
            class="value">{{ scope.record.userName || '未知用户' }}</span>
        </div>
        <div class="summary-row">
          <span class="label">提现金额：</span>
          <span class="value amount">
            ¥{{ (scope.record.withdrawalAmount) }}
          </span>
        </div>
        <div class="summary-row">
          <span class="label">申请时间：</span>
          <span
            class="value">{{ formatTime(scope.record.createTime) }}</span>
        </div>
        <div class="summary-row">
          <span class="label">用户账户：</span>
          <span
            class="value">{{ scope.record.account || '未提供' }}</span>
        </div>
        <div class="summary-row">
          <span class="label">提现账户：</span>
          <span
            class="value">{{ scope.record.bankAccount || '未提供' }}</span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="footer van-hairline--top van-dialog__footer">
    <Button @click="props.hide" size="large"
      class=" van-dialog__cancel">取消</Button>
    <Button size="large" :loading="loading"
      class="van-dialog__confirm van-hairline--left"
      @click="handleSubmit()">确定</Button>
  </div>
</template>
<script setup lang="ts">
import {
  Button,
  showFailToast,
  showSuccessToast,
} from 'vant';
import { onMounted, type PropType, ref } from 'vue';

import { operateWith } from '../api';
import WithdrowItem from '../models/WithdrowItem';
import { WithdrowOperate } from '../models/WithdrowList';

const loading = ref(false);
const params = ref<WithdrowOperate>(new WithdrowOperate());
const props = defineProps({
  scope: {
    type: Object as PropType<{
      record: WithdrowItem
      reload?: () => Promise<void>
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

onMounted(() => {
  if (props.scope.record.withdrawalId) {
    params.value.withdrawalId = props.scope.record.withdrawalId;
    params.value.status = true;
  } else {
    props.hide();
    showFailToast('用户ID不存在');
  }
});

const handlePass = async () => {
  try {
    loading.value = true;
    await operateWith(params.value);
    showSuccessToast('操作成功');
  } catch (error) {
    //
  } finally {
    if (props.scope.reload) {
      await props.scope.reload();
    }
    loading.value = false;
  }
};

const handleSubmit = async () => {
  await handlePass();

  props.hide();
};

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '-';
  return new Date(time).toLocaleString();
};

</script>
<style lang="less" scoped>
.confirm-dialog {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  padding: 20px;
  max-width: 450px;
  margin: 0 auto;

  .dialog-content {
    padding: 15px 0;
    margin: 0 -20px;

    .summary-card {
      background: #f9f9f9;
      border-radius: 10px;
      padding: 16px;
      margin: 0 20px 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .summary-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        font-size: 15px;

        .label {
          color: #666;
          font-weight: 500;
        }

        .value {
          color: #333;
          font-weight: 600;

          &.amount {
            color: #ff6b00;
          }
        }
      }
    }

  }

}
</style>
